vue extends继承后修改template的解决方案

您所在的位置：网站首页 › vue 继承方法 › vue extends继承后修改template的解决方案

vue extends继承后修改template的解决方案

2023-12-19 14:51| 来源: 网络整理| 查看: 265

vue extends继承后怎么注入虚拟DOM节点 1.需求

使用extends继承一个组件并在上面做功能的修改和扩展，同时需要小小修改一部分的template。

2.问题

直接写template的话会将原本的模板全部覆盖掉，但是copy并重写一次template又做了很多无用功显得不够优雅，也失去了继承的意义。

3.解决

暂时没有太完美的方法，目前可用的方案就是【劫持插槽】。比如继承过来的代码中有一处具名插槽footer，我的需求是在这个位置添加上几个按钮，那么我的代码可以相下面这样处理：

import basenewComponent from '***********'; export default { name: 'newComponent', extends: basenewComponent , methods：{ distribute(){}, }, render(h) { this.$slots.footer = [// 在这儿绘制的底部按钮 h('el-button', { attrs: { type: 'primary', disabled: !this.canSubmit, }, on: {//事件 click: () => { this.distribute(false); }, }, }, '新按钮1'), h('el-button', { on: { click: () => { this.distribute(true); }, }, }, '新按钮2'), h('el-button', { on: { click: () => { this.visible = false; }, }, }, '取消'), ]; return basenewComponent.render.call(this, h); }, };

【本文地址】

vue extends继承后修改template的解决方案

vue extends继承后修改template的解决方案

今日新闻

推荐新闻